<template>
    <div>
        <!-- <click-time-chart/>  -->
        <div class="ads-visit-chart-box">
             <div class="poppu-view">
                <div class="title"  v-t="'detail.title6'">User Click Period Statistics</div>
                <div class="btn-right" @click="showFlag2=true">
                    <img  src="/images/m-right.png" />
                </div>
            </div>
            <uv-pv-chart :objectId='detail.adPlaceId' :visitTypeCode='6' :operateType='11' :showTab="false" :uv='false' :showLegend="false"/>
        </div>
        <div class="not-release-tips">
            <!-- <span @click="showFlag2=true">View the traffic trend chart of advertising space</span> -->
            <my-dailog v-model:show="showFlag2" :showtopclose="true" :styleType="4" width="75%" height="80%">
                <div class="ads-visit-chart-box2">
                    <uv-pv-chart id="ads-pop-chart1" :objectId='detail.adPlaceId' :visitTypeCode='6' :operateType='11' gridBottom='50px'/> 
                </div>
            </my-dailog>
        </div>
        <!-- <div class="qq-ads-addty">
            <my-button class="btn-add" text="Add" @click="addAwaitRecord"/>
        </div> -->
    </div>
</template>

<script>
import { reactive,toRefs,getCurrentInstance,computed } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
//import rewardChart from './rewardChart.vue'
//import clickTimeChart from './clickTimeChart.vue'
import myButton from '@/components/myButton.vue'
import uvPvChart from '@/components/uvPvChart.vue'
import { toast } from '@/utils/common'
import { useI18n } from 'vue-i18n'

export default {
    props:{
        detail:{
            type:Object,
            defalult:{}
        }
    },
    components:{
       //rewardChart,
       //clickTimeChart,
       myButton,
       uvPvChart
    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()
        const {t} = useI18n()

        const state = reactive({
            userInfo:computed(()=>store.state.base.userInfo),
            showFlag:false,
            showFlag2:false
        })

        const addAwaitRecord = (adDays)=>{
            store.dispatch('ad/add_wait_release',{
                adDays:adDays,
                adPlaceId:props.detail.adPlaceId,
                walletAddress:state.userInfo.walletAddress
            }).then(res=>{
                if(res.success){
                    toast('Added Successfully')
                }else{
                    toast(res.message)
                }
            })
        }

        return{
            ...toRefs(state),
            addAwaitRecord
        }
    }
}
</script>

<style lang="scss" scoped>
    .not-release-tips{
        position: relative;
        z-index: 10;
        font-size: 22px;
        color: #55C8E7;
        font-family: Inter-Medium, Inter;
        font-weight: 500;
        text-align: center;
        padding: 25px 0 0 0;
        margin: 20px 0 0 0;
        span{
            text-decoration: underline;
        }
    }
    .not-release-tjttt{
        padding: 0 0 0 20px;
    }
    .qq-ads-addty{
        width: 440px;
        margin: 60px auto 80px auto;
        .btn-add{
             background-image: url(/images/add.png);
            background-position: center;
            background-size: 100% 100%;
            background-repeat: no-repeat;
            width:180px;
            height:60px;
        }
    }
    .ads-visit-chart-box{
        height: 360px;
        border:1px solid #67F8FF;
        padding:10px 0 40px 0;
        background-color: #67F8FF50;
        overflow: hidden;
        .poppu-view{
            display: flex;
            justify-content: space-between;
            padding:0 20px;
            align-items: center;
            align-self: center;
            .title{
                color:#fff;
                font-size:24px;
            }
            .btn-right{
              img{
                height:20px;
              }
            }
        }
    }
    .ads-visit-chart-box2{
        height: 570px;
    }
</style>